import {
  Button,
  Card,
  Form,
  Input,
  InputNumber,
  Modal,
  Space,
  Popconfirm,
  Image,
  Select,
  Empty,
  Pagination,
} from 'antd';
import { useEffect } from 'react';

import { CommonButtons } from '@/components/CommonButtons';
import { IconButton, Iconify } from '@/components/icon';
import { useCommon } from '@/hooks/common';
import setEditorDate from '@/pages/editor/setEditorDate';
import designEditor from '@/editorComponent/designEditor';
import utils from '@/utils/utils';

const typeMap: any = { 1: '店铺用户', 2: '设计师', 3: '分销商', 4: '供应商' };
const typeOptions = Object.keys(typeMap).map((key) => {
  return { label: typeMap[key], value: key };
});

export default function PicturePage() {
  const uri = 'image';
  const cateName = '我的图库';
  const {
    data = {},
    ModalPros,
    searchForm,
    onSearchFormReset,
    doDel,
    onSearch,
    handleChange,
  } = useCommon({ name: '', userId: '' }, uri, {
    name: '',
    id: 0,
    userId: '',
    picPath: '',
  });

  const toDesign = async (item: any) => {
    window.location.href = `/#/editor`;
    await setEditorDate();
    designEditor.addImg(item.name || "我的图片", utils.ossSuffix(item.picPath, 1000));
  };

  return (
    <Space direction="vertical" size="large" className="w-full">
      <Card title={cateName} bordered={false}>
        {/* <Form layout="inline" form={searchForm} onFinish={onSearch}>
          <Form.Item name="name">
            <Input placeholder="名称" />
          </Form.Item>
          <Form.Item name="userId">
            <Input placeholder="会员ID" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button onClick={onSearchFormReset}>重置</Button>
          </Form.Item>
        </Form> */}
        <div className="mt-[20px] flex flex-wrap gap-[10px]">
          {data.list?.length ? (
            data.list.map((item: any) => {
              return (
                <div className="relative flex flex-col gap-[10px]" key={item.id}>
                  <div className="relative h-[240px] w-[240px] overflow-hidden">
                    <Image src={item.picPath} alt="img" preview={false} />
                    <div className="absolute right-[10px] top-[10px] z-10">
                      <Popconfirm
                        title="确认删除该数据？"
                        okText="确定"
                        cancelText="取消"
                        placement="left"
                        onConfirm={() => doDel(item.id)}
                      >
                        <IconButton>
                          <Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
                        </IconButton>
                      </Popconfirm>
                    </div>
                  </div>
                  <div className="flex justify-between">
                    <div className="font-bold">{item.name}</div>
                  </div>
                  <div className="flex justify-between text-[#686B73]">
                    <div>ID: {item.id}</div>
                    <div>{item.createTime.substr(0, 10)}</div>
                  </div>
                  {item.type === 1 ? (
                    <CommonButtons
                      good={{ ...item, id: item.id, goodsName: item.name }}
                      edit={item.type === 1}
                      share={item.type === 1}
                      cart={item.type === 1}
                      design={item.type === 2}
                      designTitle="调用设计"
                    />
                  ) : (
                    <Button type="primary" onClick={() => toDesign(item)}>
                      调用设计
                    </Button>
                  )}
                </div>
              );
            })
          ) : (
            <div className="flex-1">
              <Empty />
            </div>
          )}
        </div>
        <div className="mt-[40px] flex" style={{ justifyContent: 'flex-end' }}>
          <Pagination
            total={data.totalCount}
            current={data.pageNo}
            pageSize={data.pageSize}
            onChange={handleChange}
          />
        </div>
      </Card>
      <CommonModal {...ModalPros} />
    </Space>
  );
}

function CommonModal({ title, show, formValue, onOk, onCancel }: any) {
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue({ ...formValue });
  }, [formValue, form]);
  return (
    <Modal
      title={title}
      open={show}
      onOk={() => onOk({ ...formValue, ...form.getFieldsValue() })}
      onCancel={onCancel}
    >
      <Form
        initialValues={formValue}
        form={form}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
      >
        <Form.Item<any> label="姓名" name="userName" required>
          <Input />
        </Form.Item>
        <Form.Item<any> label="登陆账号" name="loginName" required>
          <Input disabled />
        </Form.Item>
        <Form.Item<any> label="手机号" name="phoneNumber" required>
          <InputNumber />
        </Form.Item>
        <Form.Item<any> label="类型" name="userType" required>
          <Select options={typeOptions} />
        </Form.Item>
      </Form>
    </Modal>
  );
}
